/*!
 * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */
@import '../_tokens/index';

.tabs-section,
.platform-hinted > .platform-bookmarks-row {
  margin-bottom: var(--size-m2);

  border-bottom: 1px solid var(--text-outline);

  &.tabs_wrapping {
    border-bottom: none;
  }
}

.section-tab, /* regular tabs */
.platform-hinted > .platform-bookmarks-row > .platform-bookmark /* platform tabs but they look the same */ {
  position: relative;
  top: 1px;

  padding: 10px 16px 6px;

  cursor: pointer;

  color: var(--text-color);
  border: 0;
  border-bottom: 4px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: transparent;

  font: var(--font-text-s);
}

.no-js .platform-bookmarks-row + .sourceset-dependent-content {
  margin-top: var(--size-s2);
}

.no-js .platform-bookmarks-row + .sourceset-dependent-content:last-of-type {
  margin-top: 0;
}

.section-tab:hover {
  background-color: var(--color-background-hover);
}

.section-tab:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -4px;
}

.section-tab[data-active=''] {
  border-bottom: 4px solid var(--active-tab-border-color);
}

.tabs-section-body > div {
  margin-top: 12px;
}

/* tabs inside tables should have decreased spacing */
.table .platform-bookmarks-row, .table .tabs-section {
  margin-bottom: var(--size-s3);
}

.platform-hinted {
  display: block;
  flex: auto;
}

.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
  align-self: flex-start;
  flex: none;
  order: 5;

  min-width: var(--size-l1);

  background: inherit;
}

.platform-hinted > .platform-bookmarks-row > .platform-bookmark:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -4px;
}

.platform-hinted > .platform-bookmarks-row > .platform-bookmark:hover {
  background-color: var(--color-background-hover);
}

.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
  border-bottom: 4px solid var(--active-tab-border-color);
}

.no-js .platform-bookmarks-row,
.no-js .tabs-section {
  display: none;
}

.js .platform-hinted > .content:not([data-active]),
.js .tabs-section-body *[data-togglable]:not([data-active]) {
  display: none;
}

/*
the hack to hide the headers inside tabs for a package page because each tab
has only one header, and the header text is the same as the tab name, so no point in showing it
*/
.main-content[data-page-type='package'] .tabs-section-body h2 {
  display: none;
}
